<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Button 按钮</div>
    </ons-toolbar>

    <div class="content-wrapper">
        <div class="info-box">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-info" class="info-box-icon"></ons-icon>
                <div>
                    <div class="info-box-title">Button 组件</div>
                    <div class="info-box-content">OnsenUI 提供了多种样式的按钮，适用于不同的使用场景</div>
                </div>
            </div>
        </div>
        <h3 class="section-title">基础按钮</h3>
        
        <!-- 代码示例容器 -->
        <div class="code-example-container">
            <!-- 演示区域 -->
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button>默认按钮</ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="light">Light</ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="outline">Outline</ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="cta">CTA</ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="quiet">Quiet</ons-button>
                </p>
            </div>
            
            <!-- 操作栏 -->
            <div class="code-actions" onclick="toggleCode('basic-button')">
                <div class="code-actions-left">
                    <ons-icon id="icon-basic-button" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-basic-button" onclick="event.stopPropagation(); copyCode('basic-button')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            
            <!-- 代码显示区域 -->
            <div class="code-display" id="code-basic-button">
                <pre><code id="code-content-basic-button">&lt;ons-button&gt;默认按钮&lt;/ons-button&gt;

&lt;ons-button modifier="light"&gt;Light&lt;/ons-button&gt;

&lt;ons-button modifier="outline"&gt;Outline&lt;/ons-button&gt;

&lt;ons-button modifier="cta"&gt;CTA&lt;/ons-button&gt;

&lt;ons-button modifier="quiet"&gt;Quiet&lt;/ons-button&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">大按钮</h3>
        
        <!-- 代码示例容器 -->
        <div class="code-example-container">
            <!-- 演示区域 -->
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button modifier="large">Large</ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="large--cta">Large CTA</ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="large--quiet">Large Quiet</ons-button>
                </p>
            </div>
            
            <!-- 操作栏 -->
            <div class="code-actions" onclick="toggleCode('large-button')">
                <div class="code-actions-left">
                    <ons-icon id="icon-large-button" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-large-button" onclick="event.stopPropagation(); copyCode('large-button')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            
            <!-- 代码显示区域 -->
            <div class="code-display" id="code-large-button">
                <pre><code id="code-content-large-button">&lt;ons-button modifier="large"&gt;Large&lt;/ons-button&gt;

&lt;ons-button modifier="large--cta"&gt;Large CTA&lt;/ons-button&gt;

&lt;ons-button modifier="large--quiet"&gt;Large Quiet&lt;/ons-button&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">禁用状态</h3>
        
        <!-- 代码示例容器 -->
        <div class="code-example-container">
            <!-- 演示区域 -->
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button disabled>禁用按钮</ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="cta" disabled>禁用 CTA</ons-button>
                </p>
            </div>
            
            <!-- 操作栏 -->
            <div class="code-actions" onclick="toggleCode('disabled-button')">
                <div class="code-actions-left">
                    <ons-icon id="icon-disabled-button" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-disabled-button" onclick="event.stopPropagation(); copyCode('disabled-button')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            
            <!-- 代码显示区域 -->
            <div class="code-display" id="code-disabled-button">
                <pre><code id="code-content-disabled-button">&lt;ons-button disabled&gt;禁用按钮&lt;/ons-button&gt;

&lt;ons-button modifier="cta" disabled&gt;禁用 CTA&lt;/ons-button&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">带图标的按钮</h3>
        
        <!-- 代码示例容器 -->
        <div class="code-example-container">
            <!-- 演示区域 -->
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button>
                        <ons-icon icon="md-home" style="margin-right: 6px;"></ons-icon>首页
                    </ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="cta">
                        <ons-icon icon="md-check" style="margin-right: 6px;"></ons-icon>确认
                    </ons-button>
                </p>
                <p style="margin: 10px 0;">
                    <ons-button modifier="outline">
                        <ons-icon icon="md-favorite" style="margin-right: 6px;"></ons-icon>收藏
                    </ons-button>
                </p>
            </div>
            
            <!-- 操作栏 -->
            <div class="code-actions" onclick="toggleCode('icon-button')">
                <div class="code-actions-left">
                    <ons-icon id="icon-icon-button" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-icon-button" onclick="event.stopPropagation(); copyCode('icon-button')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            
            <!-- 代码显示区域 -->
            <div class="code-display" id="code-icon-button">
                <pre><code id="code-content-icon-button">&lt;ons-button&gt;
    &lt;ons-icon icon="md-home" style="margin-right: 6px;"&gt;&lt;/ons-icon&gt;首页
&lt;/ons-button&gt;

&lt;ons-button modifier="cta"&gt;
    &lt;ons-icon icon="md-check" style="margin-right: 6px;"&gt;&lt;/ons-icon&gt;确认
&lt;/ons-button&gt;

&lt;ons-button modifier="outline"&gt;
    &lt;ons-icon icon="md-favorite" style="margin-right: 6px;"&gt;&lt;/ons-icon&gt;收藏
&lt;/ons-button&gt;</code></pre>
            </div>
        </div>

        <h3 class="section-title">点击事件</h3>
        
        <!-- 代码示例容器 -->
        <div class="code-example-container">
            <!-- 演示区域 -->
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showToast()">点击显示提示</ons-button>
                </p>
            </div>
            
            <!-- 操作栏 -->
            <div class="code-actions" onclick="toggleCode('event-button')">
                <div class="code-actions-left">
                    <ons-icon id="icon-event-button" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-event-button" onclick="event.stopPropagation(); copyCode('event-button')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            
            <!-- 代码显示区域 -->
            <div class="code-display" id="code-event-button">
                <pre><code id="code-content-event-button">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showToast()"&gt;点击显示提示&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showToast() {
    ons.notification.toast('按钮被点击了！', {
        timeout: 2000,
        animation: 'fall'
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <div class="success-box mt-30">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-check-circle" style="color: #4caf50; font-size: 24px; margin-right: 12px;"></ons-icon>
                <div style="color: #2e7d32; line-height: 1.6;">
                    <strong>提示：</strong>按钮支持多种修饰符组合，可以创建出丰富的视觉效果
                </div>
            </div>
        </div>
    </div>

    <script>
        function showToast() {
            ons.notification.toast('按钮被点击了！', {
                timeout: 2000,
                animation: 'fall'
            });
        }
        
        // 切换代码显示
        function toggleCode(id) {
            var codeDisplay = document.getElementById('code-' + id);
            var icon = document.getElementById('icon-' + id);
            
            if (codeDisplay.classList.contains('expanded')) {
                codeDisplay.classList.remove('expanded');
                icon.setAttribute('icon', 'md-chevron-down');
            } else {
                codeDisplay.classList.add('expanded');
                icon.setAttribute('icon', 'md-chevron-up');
            }
        }

        // 复制代码到剪贴板
        function copyCode(id) {
            var codeElement = document.getElementById('code-content-' + id);
            var button = document.getElementById('copy-btn-' + id);
            var buttonText = button.querySelector('.btn-text');
            
            if (!codeElement) return;
            
            var code = codeElement.textContent;
            
            // 使用现代的 Clipboard API
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(code).then(function() {
                    showCopySuccess(button, buttonText);
                }).catch(function() {
                    copyCodeFallback(code, button, buttonText);
                });
            } else {
                copyCodeFallback(code, button, buttonText);
            }
        }

        // 复制成功提示
        function showCopySuccess(button, buttonText) {
            button.classList.add('copied');
            var originalText = buttonText.textContent;
            buttonText.textContent = '已复制';
            
            setTimeout(function() {
                button.classList.remove('copied');
                buttonText.textContent = originalText;
            }, 2000);
        }

        // 降级复制方案
        function copyCodeFallback(text, button, buttonText) {
            var textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.top = '-9999px';
            textArea.style.left = '-9999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                var successful = document.execCommand('copy');
                if (successful) {
                    showCopySuccess(button, buttonText);
                }
            } catch (err) {
                console.error('复制失败:', err);
            }
            
            document.body.removeChild(textArea);
        }
    </script>
</ons-page>
